<template>
  <a-form :form="modal.form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
    <a-form-item label="所属保司">
      <a-select show-search v-model="modal.form.companyId" :filter-option="filterOption">
        <a-select-option v-for="item in companyList" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="险种类型">
      <a-select v-model="modal.form.productType">
        <a-select-option v-for="item in productTypeList" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="产品名称">
      <a-input v-model="modal.form.name" placeholder="请输入:产品名称" />
    </a-form-item>
    <a-form-item label="产品备案名称">
      <a-input v-model="modal.form.recordName" placeholder="请输入:产品备案名称" />
    </a-form-item>

    <a-form-item label="是否组合产品">
      <a-select v-model="modal.form.isGroup">
        <a-select-option v-for="item in groupList" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-form-item>
    
    <a-form-item label="组合名称" v-if="modal.form.isGroup === 1">
      <a-input v-model="modal.form.groupName" placeholder="请输入:组合名称" />
    </a-form-item>
    
    <a-form-item label="被保人最小年龄">
      <a-input-number :min="0" :precision="0" style="width: 100%;"
      v-model="modal.form.ageMin" placeholder="请输入:被保人最小年龄"/>
    </a-form-item>
    <a-form-item label="被保人最大年龄">
      <a-input-number :min="0" :precision="0" style="width: 100%;" 
      v-model="modal.form.ageMax" placeholder="请输入:被保人最大年龄"/>
    </a-form-item>
    
    <a-form-item label="费率表类型">
      <a-select v-model="modal.form.rateType">
        <a-select-option v-for="item in rateTypeList" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="费率表基数金额">
      <a-input-number :min="0" :precision="0" style="width: 100%;"
       v-model="modal.form.rateBaseFee" placeholder="请输入:费率表基数金额"/>
    </a-form-item>
    
    <a-form-item label="等待期(天)">
      <a-input-number :min="0" :precision="0" v-model="modal.form.waitingPeriod" placeholder="等待期"
        :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
    </a-form-item>
    
    <a-form-item label="排序号">
      <a-input-number :min="1" :precision="0" v-model="modal.form.sortOrder" placeholder="排序号"
        :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: 'ProductListEdit',
    props: {
      modal: {
        type: Object,
        required: true
      },
      companyList: {
        type: Array,
        required: true
      },
      productTypeList: {
        type: Array,
        required: true
      },
      rateTypeList: {
        type: Array,
        required: true
      },
      groupList: {
        type: Array,
        required: true
      }
    },
    methods: {
      filterOption (input, option) {
          return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
          // return option?.data?.props?.name?.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    }
  }
</script>